<template>
  <div>
    <el-row class="mb-4">
      <el-button>{{ num }}</el-button>
      <el-button type="primary" @click="toNum">primary</el-button>
      <el-button type="success">Success {{ doubleNum }}</el-button>
      <el-button type="info">setState</el-button>
      <el-button type="warning">Warning</el-button>
      <el-button type="danger">Danger</el-button>
    </el-row>
  </div>
</template>
<script setup lang="ts">
// import { initGlobalState, MicroAppStateActions } from "qiankun"; // 模块二
// import action from "../qiankun/action"; // 模块三
import { ref, computed, onMounted, onUnmounted } from "vue";
// 模块一
const num = ref(1);
const doubleNum = computed(() => num.value + 1);
const toNum = () => {
  num.value = num.value * 2;
};

// 模块二 主微应用通信
// let state: Record<string, any> = {
//   baiduinit: "window",
//   abc: 456,
// };
// const actions: MicroAppStateActions = initGlobalState(state);
// actions.onGlobalStateChange((state, prev) => {
//   console.log(state, prev);
// });
// let setState = () => {
//   state = {
//     sss: 788,
//   };
//   actions.setGlobalState(state);
// };

// 模块三 主微应用通信
// let actions = action.actions;
// console.log(action);
// let locState: Record<string, any>;
// actions.onGlobalStateChange(
//   (state: Record<string, any>, prev: Record<string, any>) => {
//     console.log(state, prev);
//     locState = state;
//   },
//   true
// );
// let setState = () => {
//   locState.yyy++;
//   actions.setGlobalState(locState);
// };

onMounted(() => {
  console.log("onMounted");
});
onUnmounted(() => {
  console.log("onUnmounted");
});
</script>
